<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泰句心的冒险</title>
    <link href="lib/semantic/semantic.min.css" rel="stylesheet">
    <style>
        
    </style>
</head>

<body>
    <div id="app">
        <div class="ui menu">
            <a class="item"><i class="home icon"></i>泰句心的冒险</a>
            <div class="right menu">
                <a href="https://gitee.com/singi/singi-adventure" target="__blank" class="item"><i class="github icon"></i>gitee</a>
            </div>
        </div>
        <div class="ui grid container segment">
            <div id="player" class="five wide column">
                <div class="ui centered card">
                    <div class="image">
                        <img title="avatar" :src="player.info.avatar">
                    </div>
                    <div class="content">
                        <a class="header">{{ player.info.name }} [level:{{ player.info.level }}]</a>
                        <div class="meta">
                            <span class="date">{{ player.info.race }}</span>
                        </div>
                        <div class="description">{{ player.info.profile }}</div>
                    </div>
                    <div class="extra content grid">
                        <a><i class="heart icon green"></i> {{ player.info.hp }} HP </a>
                        <a class="right floated"><i class="sort amount up icon teal"></i> {{ player.info.exp }} EXP </a>
                    </div>
                    <div class="extra content grid">
                        <a><i class="cut icon red"></i> {{ player.info.ack }} ACK </a>
                        <a class="right floated"><i class="shield alternate icon blue"></i> {{ player.info.def }} DEF
                        </a>
                    </div>
                    <div class="extra content grid">
                        <a><i class="cut icon red"></i> {{ player.battle.hp }} HP </a>
                        <a class="right floated"><i class="shield alternate icon blue"></i> {{ player.battle.damage }} Damage
                        </a>
                    </div>
                    <div id="play-hp-progress" class="ui bottom attached progress" :class="playHPProgressColorClass" :data-percent="playHPProgress">
                        <div class="bar"></div>
                    </div>
                </div>
            </div>
            <div class="six wide column">

            </div>
            <div id="enemy" class="five wide column" style="display: none">
                <div class="ui centered card">
                    <div class="image">
                        <img title="avatar" :src="player.info.avatar">
                    </div>
                    <div class="content">
                        <a class="header">{{ enemy.info.name }}[level:{{ enemy.info.level }}]</a>
                        <div class="meta">
                            <span class="date">{{ enemy.info.race }}</span>
                        </div>
                        <div class="description">{{ enemy.info.profile }}</div>
                    </div>
                    <div class="extra content grid">
                        <a><i class="heart icon green"></i> {{ enemy.info.hp }} HP </a>
                        <!-- <a class="right floated"><i class="sort amount up icon teal"></i> {{ enemy.info.exp }} EXP </a> -->
                    </div>
                    <div class="extra content">
                        <a><i class="cut icon red"></i> {{ enemy.info.ack }} ACK </a>
                        <a class="right floated"><i class="shield alternate icon blue"></i> {{ enemy.info.def }} DEF
                        </a>
                    </div>
                    <div class="extra content grid">
                        <a><i class="cut icon red"></i> {{ enemy.battle.hp }} HP </a>
                        <a class="right floated"><i class="shield alternate icon blue"></i> {{ enemy.battle.damage }} Damage
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui center aligned container" style="margin-bottom: 20px">
            <button class="ui button" id="restart" onclick="javascript:location.reload()" style="display: none;">重新开始</button>
            <button class="ui button" id="startBtn" :class="battle_start_btn" @click="battle">开始冒险</button>
            <div class="ui checkbox">
                <input id="isAutoBattle" type="checkbox" tabindex="0" v-model="isAutoBattle" class="hidden">
                <label for="isAutoBattle">是否自动寻敌</label>
              </div>
        </div>

        <div class="ui container" style="max-height: 300px; overflow-y: scroll;">
            <div class="ui message">
                <div class="header">战斗日志</div>
                <p>
                <div class="ui small feed">
                    <battle_logs_div v-for="battle_log in battle_logs" :key="battle_log.id" :battle_log="battle_log">
                    </battle_logs_div>
                </div>
                </p>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="lib/semantic/semantic.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '开始冒险!',
                isAutoBattle: false,
                battlefield: { //战场
                    name: '起始之镇',
                    buff: {
                        player: {
                            damage: 1
                        },
                        enemy: {
                            damage: -1
                        }
                    }
                },
                player: {
                    info: {
                        name: 'Singi',
                        avatar: 'https://semantic-ui.com/images/avatar2/large/kristy.png',
                        profile: '一名普通冒险者',
                        race: '人类',
                        profession: '冒险者',
                        hp: 100,
                        ack: 10,
                        def: 10,
                        exp: 0,
                        level: 1,
                    },
                    battle: {
                        hp: 0,
                        damage: 0,
                    }
                },
                enemy: {
                    info: {
                        name: '哥布林',
                        avatar: 'http://img1.gamedog.cn/2016/04/13/159-1604131126370.jpg',
                        profile: '一种传说中的类人生物，一般都有长长的尖耳',
                        race: '类人生物',
                        profession: '盗贼',
                        hp: 20,
                        ack: 5,
                        def: 5,
                        exp: 10,
                        level: 1,
                    },
                    battle: {
                        hp: 0,
                        damage: 0,
                    }
                },
                level_config: [
                    { level: 1, exp: 10, hp: 5, ack: 5, def: 5, },
                    { level: 2, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 3, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 4, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 5, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 6, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 7, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 8, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 9, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 10, exp: 20, hp: 10, ack: 10, def: 10, },
                    { level: 11, exp: 20, hp: 10, ack: 10, def: 10, },
                ],
                battle_logs: [],//战斗日志
                battle_start_btn: {
                    loading: false,
                    disabled: false,
                }
            },
            mounted(){
                $('#play-hp-progress').progress({percent: 100});
            },
            computed: {
                playHPProgress() {
                    const playHPProgress = parseInt(this.player.battle.hp / this.player.info.hp * 100)
                    $('#play-hp-progress').progress({percent: playHPProgress});
                    return playHPProgress
                },
                playHPProgressColorClass() {
                    let playHPProgressColorClass = {green: true}
                    if (70 < this.playHPProgress && this.playHPProgress < 100) {
                        playHPProgressColorClass = {green: true}
                    } else if (40 < this.playHPProgress && this.playHPProgress < 70) {
                        playHPProgressColorClass = {olive: true}
                    } else if (10 < this.playHPProgress && this.playHPProgress < 40) {
                        playHPProgressColorClass = {yellow: true}
                    } else if (10 < this.playHPProgress && this.playHPProgress < 40) {
                        playHPProgressColorClass = {orange: true}
                    } else if (this.playHPProgress < 10) {
                        playHPProgressColorClass = {red: true}
                    }
                    return playHPProgressColorClass
                }
            },
            methods: {
                getRndInteger(min, max) {
                    return Math.floor(Math.random() * (max - min) ) + min;
                },
                getEgtZero(val){
                    if (val < 0) {
                        return 0;
                    } 
                    return val;
                },
                init_enemy(){
                    const level = this.getRndInteger(this.player.info.level, this.player.info.level + 3)

                    const min_level = level;
                    const max_level = level * 10;

                    const hp = this.getRndInteger(min_level, this.getRndInteger(min_level, max_level))
                    const ack = this.getRndInteger(min_level, this.getRndInteger(min_level, max_level))
                    const def = this.getRndInteger(min_level, this.getRndInteger(min_level, max_level))
                    const exp = this.getRndInteger(min_level, this.getRndInteger(min_level, max_level))

                    this.enemy.info.hp = hp
                    this.enemy.info.ack = ack
                    this.enemy.info.def = def
                    this.enemy.info.exp = exp
                    this.enemy.info.level = level
                },
                //开始战斗
                battle() {
                    this.battle_logs.unshift('战斗开始');

                    //初始化界面
                    this.battle_start_btn = { loading: true, disabled: true };

                    //计算玩家战斗数值
                    this.player.battle.hp = this.player.info.hp;
                    this.player.battle.damage = this.player.info.ack - this.enemy.info.def;

                    // 地形加成
                    this.player.battle.damage += this.battlefield.buff.player.damage

                    if (this.player.battle.damage <= 0) {
                        this.player.battle.damage = 0;
                    }

                    //初始化敌人
                    this.init_enemy()

                    //敌人登场动画
                    $('#enemy').transition('fade right');

                    //计算敌人战斗数值
                    this.enemy.battle.hp = this.enemy.info.hp;
                    this.enemy.battle.damage = this.enemy.info.ack - this.player.info.def;
                    // 地形加成
                    this.enemy.battle.damage += this.battlefield.buff.enemy.damage
                    if (this.enemy.battle.damage <= 0) {
                        this.enemy.battle.damage = 0;
                    }

                    //战斗循环
                    let index_setInterval = setInterval(() => {
                        //计算玩家即时伤害
                        // this.player.battle.damage += 1
                        //计算敌人即时伤害
                        // this.enemy.battle.damage += 1

                        const randomDamage = this.getRndInteger(1, 3)

                        //如果双方伤害值都低于0,则重新开始
                        if (this.player.battle.damage <= 0 && this.enemy.battle.damage <= 0) {
                            this.battle_logs.unshift('势均力敌,不分胜负');
                            this.battle_start_btn = { loading: false, disabled: false };

                            this.player.battle.damage += randomDamage

                            return false;
                        }

                        //玩家攻击敌人
                        this.enemy.battle.hp -= this.player.battle.damage;
                        this.battle_logs.unshift(this.player.info.name + ' 攻击了 ' + this.enemy.info.name + ' ，造成了 ' + this.player.battle.damage + ' 点伤害。' + this.enemy.info.name + '还剩hp:' + this.getEgtZero(this.enemy.battle.hp));
                        $('#enemy').transition('shake');
                        if (this.enemy.battle.hp <= 0) {
                            $('#enemy').transition('fade left');

                            this.battle_logs.unshift(this.enemy.info.name + '已被击败');
                            //计算经验值
                            let player_exp = this.player.info.exp + this.enemy.info.exp;
                            let level_item = this.level_config[this.player.info.level - 1];
                            //是否已顶级
                            if (level_item === undefined) {
                                this.battle_logs.unshift(this.player.info.name + ',你已成神');
                                clearInterval(index_setInterval);
                                this.battle_start_btn = { loading: false, disabled: false };
                                return false;
                            }
                            this.player.info.exp = player_exp;
                            this.battle_logs.unshift(this.player.info.name + '获得了 ' + this.enemy.info.exp + ' 经验值');
                            //是否升级
                            if (player_exp >= level_item.exp) {
                                this.player.info.exp -= level_item.exp;
                                this.player.info.hp += level_item.hp;
                                this.player.info.ack += level_item.ack;
                                this.player.info.def += level_item.def;
                                this.player.info.level = level_item.level + 1;

                                this.battle_logs.unshift(this.player.info.name + '升级了，hp+' + level_item.hp + ',ack+' + level_item.ack + ',def+' + level_item.def);
                            }

                            clearInterval(index_setInterval);
                            this.battle_start_btn = { loading: false, disabled: false };
                            if (this.isAutoBattle) this.auto_battle()
                            return false;
                        }

                        //敌人攻击玩家
                        this.player.battle.hp -= this.enemy.battle.damage;
                        this.battle_logs.unshift(this.enemy.info.name + ' 攻击了 ' + this.player.info.name + ' ，造成了 ' + this.enemy.battle.damage + ' 点伤害。' + this.player.info.name + '还剩hp:' + this.getEgtZero(this.player.battle.hp));
                        $('#player').transition('tada');
                        if (this.player.battle.hp <= 0) {
                            $('#player').transition('fade right');
                            $('#restart').show('');
                            $('#startBtn').hide('');
                            this.battle_logs.unshift(this.player.info.name + '已被击败，游戏结束');
                            clearInterval(index_setInterval);
                            this.battle_start_btn = { loading: false, disabled: false };
                            if (this.isAutoBattle) this.auto_battle()
                            return false;
                        }
                    }, 1000);
                },
                auto_battle(){
                    this.battle_logs.unshift('自动寻敌中...');
                    setTimeout(() => {
                        this.battle()
                    }, 3000);
                }
            }
        });

        //战斗日志模板
        Vue.component('battle_logs_div', {
            props: ['battle_log'],
            template: '<div class="event"><div class="content"><div class="summary"> {{ battle_log }} </div></div></div>'
        });
    </script>
</body>

</html>